<template>
  <div class="goodsindex">
    <!-- 搜索条件 -->
    <el-row :gutter="20" class="goodsindex-queryInfo">
      <!-- 商品名称搜索 -->
      <el-col :xs="8" :sm="6" :md="6" :lg="4" :xl="4">
        <el-input
          class="goodsindex-queryInfo-li"
          v-model="queryInfo.customerName"
          clearable
          size="small"
          placeholder="请输入客户名称"
        ></el-input>
      </el-col>
      <!-- 商品分类搜索 -->
      <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2">
        <el-button
          type="primary"
          class="goodsindex-queryInfo-li"
          size="small"
          @click="initData"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <!-- 检索结果 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24">
        <el-table
          :data="tableData"
          border
          v-loading="loading"
          size="small"
          style="width: 100%"
        >
          <el-table-column type="index" label="序" width="50">
          </el-table-column>
          <el-table-column prop="orderNo" label="订单号" width="180">
          </el-table-column>
          <el-table-column prop="amount" label="金额" width="150">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="150">
          </el-table-column>
          <el-table-column prop="customerName" label="客户名称" width="150">
          </el-table-column>
          <el-table-column prop="customerPhone" label="客户电话" width="150">
          </el-table-column>
          <el-table-column prop="reason" label="原因" width="150">
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="danger" @click="getData(scope.row)"
                >处理</el-button
              > -->
              <el-button size="mini" type="success" @click="getData(scope.row)"
                >确认调整</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row :gutter="20" class="goodsindex-list">
      <el-col :span="24" class="goodsindex-page-box">
        <el-pagination
          :hide-on-single-page="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="安排房间/技师" :visible.sync="selectStatu" width="30%">
      <el-form
        ref="select"
        :model="selectFrom"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="选择技师" prop="area">
          <el-autocomplete
            popper-class="my-autocomplete"
            v-model="selectFrom.state"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div class="name">{{ item.jobNo }}</div>
              <span class="addr">{{ item.employeeName }}</span>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="选择房间" prop="area">
          <el-autocomplete
            class="inline-input"
            v-model="selectFrom.roomNo"
            :fetch-suggestions="roomQuerySearch"
            placeholder="请输入内容"
            @select="roomHandleSelect"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectStatu = false">关 闭</el-button>
        <el-button type="primary" @click="confirm()">调 整</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { Switch } from "element-ui";
export default {
  data() {
    return {
      selectStatu: false,
      selectFrom: {
        id: "",
        state: "",
        technicainId: "",
        technicainName: "",
        roomNo: "",
      },
      dialogVisible: false,
      select: "",
      queryInfo: {
        goodsName: "",
        page: 1,
        pageSize: 10,
      },
      selected: null,
      options: [],
      loading: true,
      tableData: [],
      account: null,
      rooms: [],
      mebrs: [],
      deal: {},
    };
  },
  watch: {
    selected(val) {
      console.log(val);
    },
  },
  async created() {
    this.initData();
  },
  methods: {
    async initData() {
      let list = await this.http.post("/storeOrder/getDealWithList", {
        pageSize: this.queryInfo.pageSize,
        pageNo: this.queryInfo.page,
        query: {
          ...this.queryInfo,
        },
      });
      this.tableData = list.result;
      console.log(this.tableData);
      this.loading = false;
    },
    async getData(row) {
      this.deal = row;
      this.selectFrom.id = row.id;
      this.loading = true;
      let rom = await this.http.get("/storeOrder/getFreeRoom");
      let meb = await this.http.get("/storeOrder/getTechList");
      this.rooms = rom.error ? [] : rom.result;
      this.mebrs = meb.error ? [] : meb.result;
      this.selectStatu = true;
      this.loading = false;
    },
    async querySearch(queryString, cb) {
      let res = await this.http.get(
        "/storeOrder/getTechList?jobNo=" + queryString
      );
      let data = res.error ? [] : res.result;
      data.forEach((e) => {
        e.value = e.jobNo;
      });
      cb(data);
    },
    handleSizeChange(size) {
      this.queryInfo.pageSize = size;
      this.initData();
    },
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNo = currentPage;
      this.initData();
    },
    handleSelect(item) {
      this.selectFrom.technicainId = item.id;
      this.selectFrom.technicainName = item.employeeName;
    },
    roomHandleSelect(item) {
      this.selectFrom.roomNo = item.roomNum;
      console.log(this.selectFrom);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
    async roomQuerySearch(queryString, cb) {
      let res = await this.http.get(
        "/storeOrder/getFreeRoom?roomNum=" + queryString
      );
      let data = res.error ? [] : res.result;
      data.forEach((e, i) => {
        e.value = e.roomNum;
      });
      cb(data);
    },
    async confirm() {
      let req = {
        ...this.selectFrom,
        id: this.deal.id,
        oldReserveID: this.deal.id,
        adjustID: this.deal.adjustID,
      };
      let res = await this.http.post("/storeOrder/dealAdjust", req);
      this.selectStatu = false;
      if (!res.error) this.message("安排成功", "success");
      else this.message("安排失败", "error");
      this.initData();
    },
    async dealAdjust(row) {
      let res = await this.http.post("/storeOrder/dealAdjust", {
        id: row.id,
        oldReserveID: row.id,
        adjustID: row.adjustID,
      });
      if (!res.error) this.message("调整成功", "success");
      else this.message("调整失败", "error");
      this.initData();
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    to(url) {
      this.$router.push({ path: url });
    },
    message(msg, type) {
      this.eui.Message({
        message: msg,
        type: type,
      });
    },
    dateFormat(row, column) {
      let date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style lang='scss' scoped>
.goodsindex {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
/* 搜索 */
.goodsindex-queryInfo {
  margin-bottom: 10px;
}
.goodsindex-queryInfo-li {
  width: 100%;
  height: auto;
}
/* 列表 */
.goodsindex-list {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
/* 分页 */
.goodsindex-page-box {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>